<template>
  <div class="goodsComment">
    <div class="item flex-col" v-for="(item, index) in dataList" :key="`comment${index}`">
      <div class="header flex-row">
        <div class="left items-center">
          <img :src="item.avatar || headerImg" alt="" class="header-img" mode="scaleToFill">
          <div class="info flex-col">
            <div class="baseinfo flex-row">
              <span class="name">{{item.userName || '匿名用户'}}</span>
              <span class="tag">消费后评价</span>
            </div>
            <div class="scope">
              <img v-for="(scope, index) in 5" :key="`scope${index}`" :src="item.scopeNum >= scope ? iconCommentEd : iconComment" alt="" class="scope-img">
            </div>
          </div>
        </div>
        <div class="date">
          {{item.createTime | transTime}}
        </div>
      </div>
      <div class="comment">
        <div class="text">
          {{item.userContent}}
        </div>
        <div class="imgs flex-row" >
          <img src="https://pages.shengniuuz.com/ShengNiuYouZu/images/imgs/goodsDeatil/iPhone12.png" alt="" class="img" v-for="(img, idx) in item.imgs" :key="`img${idx}`">
        </div>
      </div>
    </div>
    <view class="noComment justify-center" @tap="getMoreComment">
      {{ data.finish ? "没有更多评论了" : `加载更多评论` }}
    </view>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        headerImg: 'https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/header-img.png',
        iconComment: 'https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/icon-comment.png',
        iconCommentEd: 'https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/icon-comment-ed.png',

        dataList: [],
        data: {
          page: 1,
          finish: false,
          size: 5
        }
      }
    },
    computed: {
      ...mapState('goods', {
        goodsId: state => state.goodsId
      }),
    },
    watch: {
      goodsId() {
        this.getComment()
      }
    },
    mounted() {

    },
    methods: {
      getComment() {
        this.$http.request({
          url: '/index/goodsCommentList.json',
          data: {
            pageNumber: this.data.page,
            pageSize: this.data.size,
            goodsId: this.goodsId,
          }
        }).then(({ data: { orderCommentDTOList = [] } }) => {
          const data = orderCommentDTOList.map(item => {
            return {
              ...item,
              scopeNum: parseInt(Math.floor((item.describeStars + item.serviceStars + item.deliverStars) / 3)),
            }
          })
          if (data.length < this.data.size) {
            this.data.finish = true
          } else {
            this.data.finish = false
          }
          this.dataList.push(...data)
        })
      },
      getMoreComment() {
        this.data.page += 1
        this.getComment()
      }
    }
  }
</script>
<style lang="scss">
  .goodsComment {
    width: 100%;
    padding: 0 2px;
    .item {
      min-height: 100px;
      padding: 16px 0;
      border-bottom: 1px solid #DBDBDB;
      .header {
        height: 41px;
        width: 100%;
        .left {
          height: 41px;
          .header-img {
            width: 41px;
            height: 41px;
            margin-right: 11px;
          }
          .info {
            height: 41px;
            .baseinfo {
              margin-top: 6px;
              .name {
                font-size: 13px;
                line-height: 19px;
                color: #131718;
              }
              .tag {
                width: 60px;
                height: 17px;
                border: 1px solid #E1881D;
                font-size: 10px;
                line-height: 19px;
                color: #E1881D;
                text-align: center;
                margin-left: 5px;
              }
            }
            .scope {
              margin-top: 3px;
              .scope-img {
                width: 10px;
                height: 10px;
                margin-right: 2px;
              }
            }
          }
        }
        .date {
          font-size: 10px;
          line-height: 14px;
          color: #989898;
          margin-left: auto;
          margin-top: 6px;
        }
      }
      .comment {
        margin-top: 23px;
        .text {
          font-size: 13px;
          line-height: 25px;
          color: #313131;
        }
        .imgs {
          margin-top: 16px;
          flex-wrap: wrap;
          width: 100%;
          .img {
            width: 115px;
            height: 115px;
            margin-right: 2px;
            margin-bottom: 5px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    .noComment {
      font-size: 14px;
      color: #232323;
      padding: 15px;
    }
  }
</style>
